<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*javascript在浏览器中控制页面元素(DOM)、控制浏览器(BOM)
     * 
     * DOM节点对象用来控制网页上的元素
     * 获取DOM节点对象的方式
     * （1）直接获取
     * documen.getElementByID(id属性值)
     * 获取页面中特定id值的网页元素的DOM节点对象
     * 直接得到的就是一个对象
     * document.getElementsByTagName(标签名)
     * 获取页面中特定标签名的网页元素的DOM节点对象集合（数组）
     * 需要遍历这个集合，取到其中的DOM节点对象，来完成DOM操作过程
     * 给DOM节点对象添加事件时，需要注意，在事件的回调函数中，使用
     * this来指向当前触发事件的DOM节点对象
     * getElementsByClassName(Class属性值)
     * 获取页面中特定class属性值得网页元素的DOM节点对象集合（类数组）
     * 需要遍历这个集合，获取集合中的DOM节点对象，完成DOM操作过程
     * 
     * （2）通过节点关系获取
     * 节点数（包含了注释空格） 元素树（不包含注释和空格）
     * 父节点.children    得到的是一个DOM对象 集合
     * 父节点.firstElementChild    得到第一个子元素节点的DOM对象
     * 父节点.lasElemenChild      得到最后一个子元素节点DOM对象
     * 子节点.parentNode      得到子节点的父节点DOM对象
     * 节点.previousElementSibling     前一个兄弟节点的DOM对象
     * 节点.nextELementSibling     后一个兄弟节点的DOM对象
     */
</script>
</html>